<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:align="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <th:block th:include="include :: header(#{system.user.title})" />
    <link rel="stylesheet" href="/static/css/jkanban.css" />
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"/>
    <style>
        body {
            font-family: "Lato";
            margin: 0;
            padding: 0;
        }

        myKanban {
            overflow-x: auto;
            padding: 20px 0;
        }

        .success {
            background: #00b961;
        }

        .info {
            background: #2a92bf;
        }

        .warning {
            background: #f4ce46;
        }

        .error {
            background: #fb7d44;
        }

        .custom-button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 7px 15px;
            margin: 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
    </style>
</head>

<body class="gray-bg">
<div class="row m-b-30">
    <div class="col-md-12">
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table">
                <div id="demo2">
                    <h2 align="center" th:text="${data.content}"></h2>
                    <div  class="kanban-container" style="width: 2000px;"  align="center">
                        <div class="col-sm-12">
                            <div id="1" data-id="_todo" class="kanban-board" style="width: 600px; margin-left: 40px; margin-right: 40px;"></div>
                        </div>
                        <div class="col-sm-12">
                            <div id="2" data-id="_working" class="kanban-board" style="width: 600px; margin-left: 200px; margin-right: 40px;"></div>
                        </div>
                        <div class="col-sm-12">
                            <div id="3" data-id="_done" class="kanban-board" style="width: 600px; margin-left: 200px; margin-right: 1000px;"></div>
                        </div>
                    </div>
                </div>
            </table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script src="/static/js/jkanban.js"></script>
<script async="" src="https://www.google-analytics.com/analytics.js"></script>
<script th:inline="javascript">

    var data = [[${data}]]
    var KRs = [[${KRs}]]
    var kr = ""
    var status
    var id
    var length = KRs.length
    var target_board;
    var res = {
        'id' : id,
        'status' : status
    }
    var board_todo = {
        'id' : '_todo',
        'title'  : '正常',
        'class' : 'success',
        'item'  : []
    };
    var board_working = {
        'id' : '_working',
        'title'  : '有风险',
        'class' : 'warning',
        'item'  : []
    }
    var board_done = {
        'id' : '_done',
        'title'  : '已延期',
        'class' : 'info',
        'item'  : []
    }

    for (let i = 0; i < length; i++) {
        if (KRs[i].workStatus === 1)
            board_todo.item[board_todo.item.length] = {
                'title' : KRs[i].content
            }
        if (KRs[i].workStatus === 2)
            board_working.item[board_working.item.length] = {
                'title' : KRs[i].content
            }
        if (KRs[i].workStatus === 3)
            board_done.item[board_done.item.length] = {
                'title' : KRs[i].content
            }

    }

    var kanban2 = new jKanban({
        element : '#demo2',
        gutter  : '40px',
        widthBoard : '350px',
        context : function(el){
            kr = el.innerText
            for (let i = 0;i < length;i++){
                if (KRs[i].content === kr){
                    id = KRs[i].id
                }
            }

            console.log("/okr/info/edit/" + id)
            $.modal.open("修改OKR信息","/okr/info/edit/" + id)
        },
        boards  :[
            board_todo
            ,
            board_working
            ,
            board_done
        ],
        dropEl: function (el, target, source, sibling){
            kr = el.innerText
            target_board = kanban2.getParentBoardID(el)
            for (let i = 0;i < length;i++){
                if (KRs[i].content === kr){
                    id = KRs[i].id
                    if (target_board === '_todo') status = 1
                    if (target_board === '_working') status = 2
                    if (target_board === '_done') status = 3
                    if (target_board === '_pause') status = 4
                    break
                }
            }
            res.id = id
            res.status = status
            $.ajax({
                url:  data.id + "/testJson",
                type: "GET",
                data: res,
                success: function(){
                    console.log(res)
                }

            })
        }
    });



</script>
</body>
</html>